<template>
	<div class="merchant">
		<div>
			<img :src="`/img/${data.pic}`">
			<div>
				<div>外卖</div>
				<div>{{data.mstart/(1000*60)}}分钟送达</div>
			</div>
		</div>
		<div>
			<div>{{data.mname}}</div>
			<div>
				<div class="score">{{data.score.toFixed(1)}}分</div>
				<div class="scale">月售{{data.scale}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props:['data']
	}
</script>

<style lang="scss" scoped>
.merchant {
	padding: 10px;
	flex-basis: 50%;
	background-color: #f4f4f4;
	>div {
		overflow: hidden;
		box-sizing: border-box;
		&:first-child {
			position: relative;
			>img {
				border-radius: 8px;
				max-width: 100%;
				display: block;
			}
			>div {
				position: absolute;
				bottom: 0;
				left: -5px;
				display: flex;
				align-items: flex-end;
				>div {
					&:first-child {
						padding: 5px 8px;
						font-size: 1em;
						color: #90240a;
						font-family: '微软雅黑';
						font-weight: bold;
						border-radius: 8px;
						background-image: linear-gradient(90deg,#ffe232 0%,#ffc200 100%);
					}
					&:nth-child(2){
						color: #fff;
						background-color: rgba(0,0,0,.3);
						font-size: .8em;
						padding: 5px 10px 5px 5px;
						border-top-right-radius: 5px;
					}
				}
			}
		}
		// 商家信息
		&:nth-child(2){
			background-color: #fff;
			padding: 10px 5px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			>div {
				// 店铺名样式
				&:nth-child(1){
					font-weight: bold;
					font-family: '黑体';
					padding-bottom: 8px;
				}
				&:nth-child(2){
					display: flex;
					align-items: center;
					>div {
						font-size: .9em;
						color: #a6a6a6;
						display: flex;
						align-items: center;
						&.score:after {
							content:'|';
							padding: 0 5px;
							color: #a6a6a6;
						}
					}
				}
			}
		}
	}
}
</style>